<template>
	<view class="template-reserve tn-safe-area-inset-bottom">

		<!-- <view class="justify-content-item tn-padding-bottom"> </view> -->

		<view class="slideshow">
			<view class="slideshow-image"
				:style="'background-image: url('+ noFace +');background-size: cover;background-position: center;'">
			</view>
		</view>
		<!-- 按钮-->

		<view class="tn-footerfixed tn-flex-row-between tn-flex-col-center tn-flex-row-center tn-padding-top"
			style="z-index: 9999;padding-left: 2%;" v-if="!isVideo">
			<view class="oper tn-flex" @tap.prevent.stop="">
				<!--语音切换-->
				<!-- <image v-if="isEdit" @tap="toggleEdit(false)" src="/static/img/voice-circle.png" class="icon"></image> -->
				<!-- <image v-else @tap="toggleEdit(true)" src="/static/img/keyboard.png" class="icon"></image> -->
				<!--语音切换-->
				<input v-if="isEdit" @focus="inputFocus" :cursor-spacing="12" :adjust-position="false" type="text"
					v-model="content" class="input tn-padding-sm" style="padding-top: 10px;" id="messageInput"
					placeholder="请输入内容" />
				<view v-else @touchstart="startVoice" @touchend="endVoice" class="input tn-padding-sm"
					style="text-align: center;">按住说话</view>
				<!--表情-->
				<!-- <image @tap="togglePicker(200, 'emoji')" src="/static/img/emoji.png" class="icon tn-padding-xs"></image> -->
				<!--发送-->
				<!-- <view @touchend.prevent="send" v-show="content" class="btn tn-padding-xs" id="sendButton">发送</view> -->
				<!--附件-->
				<!-- <image @tap="togglePicker(86, 'file')" v-show="!content" src="#" class="icon tn-padding-sm"></image> -->
				<!-- <image @tap="togglePicker(0, 'file')" v-show="!content" src="/static/img/add.png" class="icon"></image> -->
				<!-- <image @click="showMsg" v-show="!content" src="/static/image/showmsg2.png" class="icon"></image> -->

			</view>
			<!--表情-->
			<!-- <view v-show="showEmoji" class="emoji" @tap.prevent.stop="">
          	<view class="list">
          		<view class="item" @tap="content += item" v-for="(item, index) in emojis" :key="index">{{ item }}</view>
          	</view>
          </view> -->
			<!--附件-->
			<view v-show="showFile" class="file" @tap.prevent.stop="">
				<view class="list tn-flex">
					<!-- <view class="item flex-column" @tap="uploadImage(['album'])">
          			<image src="/static/img/album.png" mode="widthFix" class="icon"></image>
          			<view class="text">相册</view>
          		</view>
          		<view class="item flex-column" @tap="getLocation">
          			<image src="/static/img/location.png" mode="widthFix" class="icon"></image>
          			<view class="text">位置</view>
          		</view> -->
					<view class="item flex-column" @tap="video">
						<image src="/static/img/photo.png" mode="widthFix" class="icon"></image>
						<view class="text">视频通话</view>
					</view>
				</view>
			</view>
		</view>
		<!--语音-->
		<my-voice v-show="showVoice"></my-voice>


		<!-- <view class="justify-content-item tn-flex-col-center tn-flex-row-center tn-text-center tn-padding-bottom" @click="openLocation">
          <view class="tn-bg-gray--light tn-padding-xs tn-margin-sm tn-color-black tn-round">
            <text class="tn-icon-location-fill" style="font-size: 50rpx;"></text>
          </view>
        </view> -->

	</view>
</template>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.js"></script>
<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import emoji from '@/plugins/emoji.js'
	import myVoice from '@/components/self-voice/index.vue'
	import {
		uniFetch
	} from '@/utils/uni-fetch'

	import SockJS from '@/common/sockjs.min.js'
	import Stomp from '@/common/stomp.js'
	import webstomp from '@/common/webstomp.js'

	const innerAudioContext = uni.createInnerAudioContext()
	const recorderManager = uni.getRecorderManager()
	// const player = new RTCPlayer()
	var dataChannel = null;
	var audioElement = null;
	var videoElement = null;
	var isTransmitting = true;
	let pc = null;

	var stompClient = null;

	export default {
		mixins: [template_page_mixin],
		components: {
			myVoice
		},
		data() {
			return {
				bodyNavHeight: 0, //元素的所需高度
				hideCoverStatus: false,
				cardCur: 0,
				swiperList: null,
				current: 0,
				showCurrent: 0,
				startX: 0,
				isNextFace: false,
				adAutoplay: false,
				iszstalk: true,

				/* 压屏窗*/
				show2: false,
				maskCloseable: true,
				border: true,
				boxShow: true,

				emojis: [],
				isEdit: false,
				isFocus: false,
				showEmoji: false,
				showFile: false,
				showVoice: false,
				scrollHeight: 'auto', // 内容区域高度
				statusBarHeight: 0, // 状态栏高度
				scrollViewId: 'bottom', // 滚动到最底部
				voicePlayingId: '', // 正在播放的消息ID
				content: '',
				list: null,
				socketOpen: false,
				socketMsgQueue: [],
				fromUserId: 666,
				fromUserFace: '/static/logo.png',
				toUserId: '',
				toUserName: '聊天室',
				tokenInfo: '',
				nextCas: '',
				record: '',
				isVideo: false,
				recording: false,
				inited: false,
				speacking: false,
				loading: true,
				role: 'LuXun',
				role_name: '童薇',
				role_desc: '高冷御姐，美女总裁。',
				voiceId: 'zh_female_meilinvyou_moon_bigtts',
				showTimbre: '',
				session: '',
				intervalId: null,
				intervalId2: null,
				isDragging: false,
				isSend: false,
				options: {},
				statusoptions: {},
				turnoptions: {},
				initializeoptions: {},
				loginToken: uni.getStorageSync('loginToken') || '',
				// userInfo: uni.getStorageSync('userInfo') || null,
				zhushou: null,
				zsid: 0,
				userid: 0,
				audiooff: true,
				noFace: '',
				isFace: true,
				alive: true,
				isShowMsg: false,
				isVolume: true,
				msgtext: '',
				msgimg: '',
				abortController: null,
				bottomSize: 180,
				mydataChannel: null,
				userInfo: uni.getStorageSync('userInfo') || null,
				baseurl: [
					"/work1031/",
					"/work1032/",
					"/work1033/",
					"/work1034/",
					"/work1035/",
					"/work1036/",
					"/work1037/",
					"/work1038/",
					"/work1051/",
					"/work1052/",
					"/work1053/",
					"/work1054/",
					"/work1055/",
					"/work1056/",
					"/work1057/",
					"/work1058/",
					"/work1061/",
					"/work1062/",
					"/work1063/",
					"/work1064/",
					"/work1065/",
					"/work1066/",
					"/work1067/",
					"/work1068/",
					"/work1071/",
					"/work1072/",
					"/work1073/",
					"/work1074/",
					"/work1075/",
					"/work1076/",
					"/work1077/",
					"/work1078/",
					"/work1091/",
					"/work1092/",
					"/work1093/",
					"/work1094/",
					"/work1095/",
					"/work1096/",
					"/work1097/",
					"/work1098/"
				],
				apibaseurl: 'https://human.cycyai.com:8881',
				isLocked: false,
				sendnumf: 0,
				clientid: 0,
				showzsid: 0,
				linkhm: false,
				linktime: 0,
				hmtimer: null,
				appSecret: uni.getStorageSync('appsecret') || null,
			}
		},
		onLoad(option) {
			if (option.appsecret) {
				this.appSecret = option.appsecret;
			}
			// console.log(this.appSecret);
			// this.islogin();
			// 初始化内容高度
			this.setScrollHeight()

			// 初始化状态栏高度
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
				}
			})

			let formData = {
				appsecret: this.appSecret,
			};
			this.$Request.getApi("/bot/api/getmicinfo", formData).then(async (res) => {
				if (res.status == 1) {
					this.noFace = res.data.headimgurl;
					this.zhushou = res.data;
					this.connect();
					// console.log('getmicinfo:',res.data);
				}
			});

			// if(option.zsid){
			// 	this.zsid = option.zsid;
			// this.wvUrl = 'https://www.cycyai.com/human/#/activityPages/map?appsecret=' + this.appSecret;
			// console.log(this.wvUrl);
			// }
			// if(uni.getStorageSync("makeNewAvatar")){
			// 	let makeNewAvatar = uni.getStorageSync("makeNewAvatar");
			// 	this.wvUrl = 'https://h5.cycyai.com/#/activityPages/map?role_name=' + makeNewAvatar.name + '&role_desc=' + makeNewAvatar.info + '&timbre=' + makeNewAvatar.timbre;
			// }

			//    var currentWebview= this.$scope.$getAppWebview();//获取当前页面的webvie
			// setTimeout(function() {
			// 	wv = currentWebview.children()[0]; //获取当前web-view

			// 	console.log("wv:",wv);
			// }, 1000); //如页面初始化调用需要写延迟

			// wv.evalJS(
			//   "document.dispatchEvent(new CustomEvent('message',{detail: {zsid:" + JSON.stringify(option.zsid) + "}}))"
			// )

			const recorderManager = uni.getRecorderManager()
			console.log('recorderManager')
			console.log(recorderManager)

			recorderManager.onError((err) => {
				console.error('recorderManager：' + err)
				// 根据错误信息进行相应的处理
			})

			var that = this;
			// 结束录音
			recorderManager.onStop(function async (res) {
				// date.path = res.tempFilePath  // 这个是录音文件的临时地址
				// date.time = timeLength.value    // 录音时长

				// 上传音频文件到服务器上
				uni.uploadFile({
					url: 'https://ocr.luyanshidai.com:6501/api/core/user/upload', //仅为示例，非真实的接口地址
					filePath: res.tempFilePath, //  这个是录音文件的临时地址
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						//  uni.removeSavedFile({
						// 	 filePath: res.tempFilePath, // 使用找到的文件路径
						// 	 success: function (res) {
						// 		 console.log('删除成功');
						// 	 },
						// 	 fail: function (err) {
						// 		 console.error('删除失败', err);
						// 	 }
						//  });
						// console.log('uploadFileRes' +uploadFileRes.data)
						var obj = JSON.parse(uploadFileRes.data);
						if (obj.status == 'success') {
							console.log('ask' + obj.data.Info.result[0].text)
							// wv.evalJS(
							//   "document.dispatchEvent(new CustomEvent('message',{detail: {ask:" + JSON.stringify(obj.data.Info.result[0].text) + "}}))"
							// )
						}
						// if(obj.status == 'success'){
						//     console.log('ask' + obj.data.Info.result[0].text)
						// 	if(obj.data.Info.result[0].text != null){
						// 		that.asktxt = that.asktxt + obj.data.Info.result[0].text;
						// 	}
						// }else{
						// 	if(that.asktxt != '' && that.isasktxt == false){
						// 		that.isasktxt = true;
						// 		wv.evalJS(
						// 		  "document.dispatchEvent(new CustomEvent('message',{detail: {ask:" + JSON.stringify(that.asktxt) + "}}))"
						// 		)
						// 		that.asktxt = '';
						// 		that.isasktxt = false;
						// 	}
						// }

					}
				});
				console.log('recorder stop' + JSON.stringify(res))
				// self.voicePath = res.tempFilePath
			})

			// this.recorderManager.onStop(res=>{
			// 	this.upload(res.tempFilePath)
			// })

			// 结束播放
			innerAudioContext.onEnded(res => {
				this.voicePlayingId = ''
			})

			// 设置标题
			uni.setNavigationBarTitle({
				title: option.toUserName
			})

			// 获取参数
			this.toUserId = option.toUserId
			this.toUserName = option.toUserName
			this.emojis = emoji

			// 获取消息记录
			this.getList()

			// 监听webSocket消息
			// this.$xbcim.onmessage(data=>{
			// 	// 只接受单聊消息
			// 	if(data.type != 'single') return

			// 	// 处理数据
			// 	data.id = data.extra.id
			// 	data.userFace = data.extra.userFace
			// 	this.list.push(data)
			// 	this.initScrollBar()
			// })


			// this.$Request.getT("/api/core/user/token").then(async (res) => {
			//     if (res.code == 20000) {
			// 		// console.log("nextCas");
			//       this.tokenInfo = res.data.tokenInfo;
			// 		const container = document.getElementById('nextcas');
			// const canvasEle = document.createElement('canvas');
			// container.appendChild(canvasEle);
			// const gl = canvasEle.getContext('webgl');
			// // console.log('Before await');
			// 		this.nextCas = await new NextCas(container, {
			// 		  token: res.data.tokenInfo,
			// 		  actorId: "actor_100256",
			// 		  templateName: "base",
			// 		  avatarId: "avatar_257",
			// 		});
			// // console.log('After await');
			// // this.loading = false;
			//     }
			// });

			// this.$Request.getT("/api/core/user/token").then(async (res) => {
			//     if (res.code == 20000) {
			//       this.tokenInfo = res.data.tokenInfo;
			// 		this.record = new Record(res.data.tokenInfo, "641811add41a3f2f91247af5");
			//     }
			// });

		},
		onReady() {
			// this.intervalId = setInterval(() => {
			//  console.log('linktime:' + this.linktime);
			//  if(this.linkhm){
			//  	this.linktime++;
			//  	if(this.linktime >= 2){
			//  		this.linkhm = false;
			//  		this.linktime = 0;

			//  	}
			//  }
			// }, 1000);
			this.initScrollBar();
			this.$nextTick(() => {
				this.getContentRectInfo()
			})
		},
		onShow() {
			// this.islogin();
			this.showzsid = uni.getStorageSync('showCurrent') || 0;
			// this.showCurrent = uni.getStorageSync('showCurrent') || 0;
			// this.cardCur = uni.getStorageSync('showCurrent') || 0;
			// this.adAutoplay = true;
			// this.getAllData();
			console.log('makeNewAvatar:' + uni.getStorageSync('makeNewAvatar'))
		},
		mounted() {
			var that = this;
			document.addEventListener("message", (e) => {
				//webview接收uniapp传过来的信息
				console.log('message', e.detail.ask)
				if (e.detail.ask) {
					// that.ask(e.detail.ask)
					that.content = e.detail.ask;
					// var message = e.detail.ask.toString();
					// that.wssend();
					stompClient.send("/app/v1/chat", {}, JSON.stringify({
						'content': that.content,
						'from': 'agent_' + that.zhushou.id
					}));
					// stompClient.send("/app/v1/chat", {}, "{content:123123123}");
				}
				if (e.detail.onhide) {
					isTransmitting = false;
					const stopMessage = JSON.stringify({
						type: 'stop'
					});
					dataChannel.send(stopMessage);
				}
				// this.ask(e.detail.ask)
			}, false)
		},
		onHide() {
			var that = this;
			// 页面隐藏时清除间隔调用
			if (this.intervalId) {
				clearInterval(this.intervalId);
			}
			console.log(this.session);
			let date = {
				session: this.session
			};
			try {
				// const response = fetch(this.apibaseurl+'imagehuman-unlock-client-id', {
				// 	method: 'POST',
				// 	headers: {
				// 	  'Content-Type': 'application/json'
				// 	},
				// 	body: JSON.stringify({ client_id: this.clientid })
				// }); 

				//   if (response.ok) {
				// 	console.log('Server termination initiated');
				//   } else {
				// 	console.error('Failed to terminate server');
				//   }
			} catch (error) {
				console.error('Error terminating server:', error);
			}
			// this.$Request.postT("/api/core/user/lpostop",date).then((res) => {
			// 	console.log(res);
			// 	player.stop();
			// 	this.session = null;
			// });
		},
		onUnload() {
			var that = this;
			if (this.intervalId) {
				clearInterval(this.intervalId);
			}
			console.log(this.session);
			let date = {
				session: this.session
			};
			try {
				const response = fetch(this.apibaseurl + 'imagehuman-unlock-client-id', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({
						client_id: this.clientid
					})
				});

				//   if (response.ok) {
				// 	console.log('Server termination initiated');
				//   } else {
				// 	console.error('Failed to terminate server');
				//   }
			} catch (error) {
				console.error('Error terminating server:', error);
			}
			// this.$Request.postT("/api/core/user/lpostop",date).then((res) => {
			// 	console.log(res);
			// 	player.stop();
			// 	this.session = null;
			// });
		},
		methods: {
			connect() {
				var socket = new SockJS('http://47.95.43.65:9999/endpoint-websocket'); //连接上端点(基站)
				// stompClient = Stomp.over(socket);           //用stom进行包装，规范协议
				// stompClient.connect({}, function (frame) {  
				//     console.log('Connected: ' + frame);
				//     stompClient.subscribe('/topic/game_chat', function (result) {
				//         console.info("result="+result)
				//         // showContent(JSON.parse(result.body));
				//     });
				// });

				stompClient = webstomp.over(socket);
				stompClient.connect({}, function() {
					stompClient.subscribe("/topic/game_chat", function(message) {
						let result = JSON.parse(message.body);
						console.info("resultMSG:" + result.content);
					});

				});
			},
			wssend() {
				console.log('contentmessage:', JSON.stringify({
					'content': this.content
				}));
				stompClient.send("/app/v1/chat", {}, JSON.stringify({
					'content': this.content
				}));
			},
			mysearch() {
				console.log('搜索');
				uni.webView.postMessage({
					data: {
						action: '搜索',
					}
				});
			},
			showinfo() {
				console.log('信息');
				uni.webView.postMessage({
					data: {
						action: '信息',
					}
				});
			},
			generateClientId() {
				return Math.random().toString(36).substr(2, 9);
			},
			// 在renderScript中触发的方法
			abortFetch() {
				// 中止请求
				if (this.abortController) {
					this.abortController.abort();
					this.abortController = null;
				}
			},
			beReset() {
				let date = {
					session: this.session
				};
				//  this.$Request.postT("/api/core/user/lporeset",date).then((res) => {
				//  	console.log(res);
				// // player.play();
				//  });
			},
			showMsg() {
				this.isShowMsg = !this.isShowMsg;
				this.initScrollBar();
			},
			setV() {
				console.log("setV切换:");
				this.isVolume = !this.isVolume;
				if (!this.isVolume) {
					// 假设 videoElement 是你的 <video> 元素，并且它已经通过 srcObject 设置了 WebRTC 视频流
					const stream = audioElement.srcObject;

					// 检查 stream 是否有效且包含音频轨道
					if (stream && stream.getAudioTracks().length > 0) {
						const audioTracks = stream.getAudioTracks();
						audioTracks.forEach(track => {
							track.enabled = false; // 禁用音频轨道，实现静音效果
						});
					}
				} else {
					// 假设 videoElement 是你的 <video> 元素，并且它已经通过 srcObject 设置了 WebRTC 视频流
					const stream = audioElement.srcObject;

					// 检查 stream 是否有效且包含音频轨道
					if (stream && stream.getAudioTracks().length > 0) {
						const audioTracks = stream.getAudioTracks();
						audioTracks.forEach(track => {
							track.enabled = true; // 启用音频轨道
						});
					}
				}
			},
			changeaudio() {
				this.audiooff = false;
				this.startVoice();
			},
			changeaudio2() {
				this.audiooff = true;
				this.endVoice();
			},
			getMsgData() {
				let formData = {
					userid: this.userid,
					zsid: this.zsid
				};
				this.$Request.postApi("/module.php?m=aichat_bchat&a=getMsg&ajax=1", formData).then((res) => {
					if (res.error == 0) {
						this.list = res.data.msgList;
						this.zhushou = res.data.zhushou;
						this.role_name = res.data.zhushou.title;
						this.role_desc = res.data.zhushou.description;
						this.voiceId = res.data.zhushou.content;
					}
				});
			},
			sendMsg(content, sendRole) {
				if (sendRole == 'user') {
					this.iszstalk = false;
					this.msgtext = content;
					this.msgtext = this.msgtext.substring(0, 18) + '...';
					this.msgimg = this.userInfo.user_head;
				} else {
					this.iszstalk = true;
					this.msgtext = content;
					this.msgtext = this.msgtext.substring(0, 18) + '...';
					this.msgimg = this.zhushou.imgurl;
				}

				console.log("sendRole:", sendRole);
				console.log("content:", content);

				if (sendRole == 'assistant') {
					// setTimeout(() => {
					let formData = {
						userid: this.userid,
						zsid: this.zsid,
						prompt: content,
						role: sendRole,
					};
					this.$Request.postApi("/module.php?m=aichat_bchat&a=send&ajax=1", formData).then((res) => {
						if (res.error == 0) {
							this.getMsgData();
							this.initScrollBar();
						} else {
							uni.showModal({
								showCancel: false,
								title: '聊天数据发送失败',
								content: res.message,
							});
						}
					});
					// this.getMsgData();
					// }, 3000*this.sendnumf);
				} else {
					let formData = {
						userid: this.userid,
						zsid: this.zsid,
						prompt: content,
						role: sendRole,
					};
					this.$Request.postApi("/module.php?m=aichat_bchat&a=send&ajax=1", formData).then((res) => {
						if (res.error == 0) {
							this.getMsgData();
							this.initScrollBar();
						} else {
							uni.showModal({
								showCancel: false,
								title: '聊天数据发送失败',
								content: res.message,
							});
						}
					});
					// this.getMsgData(); 
				}
			},
			acceptData(data) {
				// some code
				let date2 = null;
				if (data.type == 'success') {
					// console.log(data.end);
					this.alive = false;
					if (data.end == 1) {
						// console.log(data.prompt);
						this.sendMsg(data.prompt, 'assistant');
						this.isSend = false;
						this.alive = true;
					}

					date2 = {
						session: this.session,
						audio: data.audio,
						frame: data.frame,
					};
					setTimeout(() => {
						// this.$Request.postT("/api/core/user/lpoaudioctrl",date2).then((res2) => {
						// 	console.log(res2);
						// });
					}, 5000);
				}
			},
			acceptStatusData(data) {
				console.log('StatusData:', data);
				// some code
				// let date2 = null;
				if (data.type == 'success') {
					// console.log(data.end);
					//this.loading = false;
					let date2 = {
						client_id: this.clientid,
					};
					// let date2 = null;
					this.abortController = new AbortController();
					this.turnoptions = {
						myDate: date2,
						signal: this.abortController.signal,
						url: this.apibaseurl + 'imagehuman-get-turn-credentials'
					};
				} else if (data.type == 'star') {

				} else {
					// this.baseurl[0].islink = true;
					// let nolink = true;
					// for(let i = 0; i < 8; i++) {
					//  if(!this.baseurl[i].islink.islink){
					//   this.baseurl[index].islink = true;
					//   this.apibaseurl = this.baseurl[index].url;
					//   nolink = false;
					//   let date = {
					//   	client_id: 'cycy_'+this.userInfo.userid.toString(),
					//   };
					//   // // let date2 = null;
					//   this.abortController = new AbortController();
					//   this.statusoptions = {
					//   	myDate: date,
					//   	signal: this.abortController.signal,
					//   	url: this.apibaseurl+'/imagehuman-connection-status'
					//   };
					//   break;
					//  }else{
					//   nolink = true;
					//  }
					// }
					// if(nolink){
					// if(data.data != null){
					// this.noFace = this.zhushou.imgurl;
					// this.isFace = false;
					// uni.showModal({
					// 	showCancel: false,
					// 	title: '连接失败',
					// 	content: '暂无可用链路,无法连接动态智能体,即将以静态方式进行展示。',
					// });
					// }
					// }
				}
			},
			acceptTurnData(data) {
				console.log('TurnData:', data.data);
				var that = this;
				// some code
				// let date2 = null;
				if (data.type == 'success') {
					let voiceEncoding = "pcm";
					let date2 = {
						query: this.showTimbre,
						user_uuid: this.userid,
						// role: this.role,
						role_name: this.role_name,
						role_desc: this.role_desc,
						voice_id: this.voiceId,
						voice_encoding: voiceEncoding,
					};

					// let date2 = null;
					// console.log('data:',data.data);
					// console.log('password:',data.date.password);
					console.log('TurnData_username:', data.data.username);
					console.log('TurnData_password:', data.data.password);
					// 关闭已有的连接
					if (pc) {
						pc.close();
						pc = null;
					}

					pc = new RTCPeerConnection({
						iceServers: [{
							// urls: ["turn:192.168.31.240:3478"],
							urls: ["turn:220.197.166.216:3471", "turn:220.197.166.216:3472",
								"turn:220.197.166.216:3473"
							],
							username: data.data.username,
							credential: data.data.password,
							credentialType: "password"
						}],
						iceTransportPolicy: "all",
						bundlePolicy: "max-bundle",
						rtcpMuxPolicy: "require"
					});

					// Create DataChannel with specific configuration
					dataChannel = pc.createDataChannel("interaction", {
						ordered: true,
						maxRetransmits: 3
					});

					this.mydataChannel = dataChannel;

					// DataChannel event handlers
					dataChannel.onclose = () => {
						console.log('DataChannel closed');
					};

					dataChannel.onerror = (error) => {
						console.error('DataChannel error:', error);
					};

					dataChannel.onmessage = (event) => {
						console.log("Received server message:", event.data);
					};

					// Message queue for pending messages
					// 		const messageQueue = [];
					// 		let isDataChannelOpen = false;

					// 		// Function to process message queue
					// 		function flushMessageQueue() {
					// 		  while (messageQueue.length > 0 && dataChannel.readyState === 'open') {
					// 			const message = messageQueue.shift();
					// 			dataChannel.send(message);
					// 			console.log("Data sent via DataChannel:", message);
					// 		  }
					// 		}

					// DataChannel open handler
					dataChannel.onopen = function() {
						console.log("Data channel is open");
						isTransmitting = false;
						// isDataChannelOpen = true;
						// flushMessageQueue();

						// Send button event listener
						// document.querySelector('sendButton').addEventListener('click', async function() {
						// console.log('sendButton');
						function log(message) {
							console.log(message);
						}

						// Utility: Split string into chunks
						function splitStringIntoChunks(str, chunkSize) {
							const chunks = [];
							for (let i = 0; i < str.length; i += chunkSize) {
								chunks.push(str.slice(i, i + chunkSize));
							}
							return chunks;
						}

						// Send large message handler
						function sendLargeMessage(dataChannel, message, chunkSize = 16000) {
							const chunks = splitStringIntoChunks(message, chunkSize);
							const totalChunks = chunks.length;

							chunks.forEach((chunk, index) => {
								const messageToSend = JSON.stringify({
									type: 'chunk',
									index: index,
									total: totalChunks,
									data: chunk
								});
								if (isTransmitting) {
									dataChannel.send(messageToSend);
								}
							});

							const endMessage = JSON.stringify({
								type: 'end'
							});
							if (isTransmitting) {
								dataChannel.send(endMessage);
							}
						}

						// 工具函数：睡眠指定时间（毫秒）
						function sleep(ms) {
							return new Promise(resolve => setTimeout(resolve, ms));
						}

						async function testRoleCustomTextAudioStream(query, userUuid, roleName, roleDesc, voiceId,
							voiceEncoding) {
							const HTTP = 'https://ai.cycyai.com:8000';
							const url = `${HTTP}/api/role/stream-audio`;

							isTransmitting = true;

							const requestBody = {
								text: query,
								voice_id: voiceId,
								voice_encoding: voiceEncoding
							};

							let buffer = '';

							try {
								const response = await fetch(url, {
									method: 'POST',
									headers: {
										'Content-Type': 'application/json'
									},
									body: JSON.stringify(requestBody)
								});

								if (response.ok) {
									log(`[${userUuid}] Request started, status: ${response.status}`);

									const reader = response.body.getReader();
									const decoder = new TextDecoder('utf-8');

									that.isFace = false;

									while (true) {
										const {
											done,
											value
										} = await reader.read();
										if (done) break;

										const chunk = decoder.decode(value, {
											stream: true
										});
										buffer += chunk;

										let jsonIndex;
										while ((jsonIndex = buffer.indexOf('<Json>')) !== -1) {
											log("Detected <Json> separator");

											const jsonObject = buffer.substring(0, jsonIndex).trim();
											buffer = buffer.substring(jsonIndex + '<Json>'.length);

											try {
												// jsonObject = jsonObject.replace(/\\/g, "");
												const data = JSON.parse(jsonObject);

												const textChunk = data.text || "";
												const audioChunk = data.audio || "";

												console.log(`textChunk:`, textChunk);
												console.log(`audioChunk:`, audioChunk);

												const messageToSend = JSON.stringify({
													text: textChunk,
													audio: audioChunk
												});

												console.log(`mydataChannel:`, dataChannel)

												if (dataChannel.readyState === 'open') {
													log(`DataChannel is open`);
													sendLargeMessage(dataChannel, messageToSend);
													log(`Data sent via DataChannel`);
												} else {
													log('DataChannel not open, message queued');
													messageQueue.push(messageToSend);
												}

												await sleep(3000);
											} catch (err) {
												const data = JSON.parse(jsonObject);
												log(`JSON parsing error: ${data}, Error: ${err.message}`);
											}
										}
									}

								} else {
									const errorText = await response.text();
									log(`Error: ${response.status}, ${errorText}`);
								}

							} catch (error) {
								log(`Request failed: ${error.message}`);
							}
						}

						// var messageInput = document.querySelector('messageInput');
						console.log('开场白', that.showTimbre);
						// that.isFace = false;
						// console.log("Video isFace:", that.isFace);
						// that.isFace = true;
						// console.log("Video isFace:", that.isFace);
						var message = that.showTimbre;
						if (message) {
							const query = message;
							const userUuid = that.userid;
							const roleName = that.role_name;
							const roleDesc = that.role_desc;
							const voiceId = that.voiceId;
							const voiceEncoding = "pcm"; // 或 "wav"

							testRoleCustomTextAudioStream(query, userUuid, roleName, roleDesc, voiceId, voiceEncoding);

							// messageInput.value = ""; // 清空输入框
						}

						// 如果需要直接发送输入框的内容，可以启用以下代码
						// var messageInput = document.getElementById('messageInput');
						// var message = messageInput.value;
						// if (message) {
						//   dataChannel.send(message);
						//   console.log("Sent message to server:", message);
						//   messageInput.value = ""; // 清空输入框
						// }
						// });
					};

					pc.ondatachannel = function(event) {
						var receiveChannel = event.channel;
						receiveChannel.onmessage = function(event) {
							console.log("Received message from server:", event.data);
						};
					};

					pc.ontrack = function(event) {
						console.log('Received track:', event.track.kind);
						console.log('Stream received:', event.streams[0]);

						// 可以在这里给 track 本身再添加监听器
						event.track.onmute = function() {
							console.log('Track was muted:', event.track.kind);
						};

						event.track.onunmute = function() {
							console.log('Track was unmuted:', event.track.kind);
						};

						if (event.track.kind === 'video') {
							console.log('Video track received');
							videoElement = document.getElementById('video_' + that.zhushou.zsid).querySelector(
							'video');
							console.log('videoElement:', videoElement);
							videoElement.srcObject = event.streams[0];
							console.log('Video stream connected to element');
						} else if (event.track.kind === 'audio') {
							console.log('Audio track received');
							audioElement = document.querySelector('audio');
							if (!audioElement) {
								audioElement = document.createElement('audio');
								audioElement.id = 'audio';
								audioElement.autoplay = true;
								document.body.appendChild(audioElement);
								console.log('Audio element created');
							}
							audioElement.srcObject = event.streams[0];
							console.log('Audio stream connected to element');
						}
					};

					// 添加接收器，表示希望接收音频和视频
					const videoTransceiver = pc.addTransceiver('audio', {
						direction: 'recvonly'
					});
					const videoSender = videoTransceiver.sender;
					const parameters = videoSender.getParameters();

					// 设置最大和最小码率
					// parameters.encodings = [{
					//   codec: 'H264',
					//   maxBitrate: 3000 * 1000,  // 限制最大码率为 3 Mbps
					//   minBitrate: 1000 * 1000   // 限制最小码率为 1 Mbps
					// }];
					// videoSender.setParameters(parameters);

					pc.addTransceiver('video', {
						direction: 'recvonly'
					});

					// 修改 offer 发送部分
					pc.createOffer()
						.then(function(offer) {
							return pc.setLocalDescription(offer);
						})
						.then(function() {
							return fetch(that.apibaseurl + 'imagehuman-webrtc-offer', {
								method: "POST",
								body: JSON.stringify({
									sdp: pc.localDescription.sdp,
									type: pc.localDescription.type,
									client_id: that.clientid,
									image_id: that.zhushou.image_id
								}),
								headers: {
									"Content-Type": "application/json",
								},
							});
						})
						.then(function(response) {
							if (!response.ok) {
								throw new Error(`Server error: ${response.status}`);
							}
							return response.json();
						})
						.then(function(answer) {
							return pc.setRemoteDescription(new RTCSessionDescription(answer));
						})
						.catch(function(e) {
							console.error('Connection error:', e);
						});

					pc.onconnectionstatechange = function() {
						console.log("Connection State:", pc.connectionState);
						if (pc.connectionState === "failed" || pc.connectionState === "disconnected" || pc
							.connectionState === "closed") {
							console.log("Connection ended:", pc.connectionState);
							// 不再尝试重新连接
							if (pc) {
								pc.close();
								pc = null;
							}
						}
					};

					pc.oniceconnectionstatechange = function() {
						console.log("ICE Connection State:", pc.iceConnectionState);
						if (pc.iceConnectionState === "failed") {
							console.log("ICE Connection failed");
							// 移除自动重连逻辑
							if (pc) {
								pc.close();
								pc = null;
							}
						}
					};

					pc.onicegatheringstatechange = function() {
						console.log("ICE Gathering State:", pc.iceGatheringState);
					};

					pc.onicecandidate = function(event) {
						if (event.candidate) {
							console.log("New ICE candidate:", {
								foundation: event.candidate.foundation,
								protocol: event.candidate.protocol,
								type: event.candidate.type,
								address: event.candidate.address,
								port: event.candidate.port,
								priority: event.candidate.priority,
								tcpType: event.candidate.tcpType
							});
						}
					};

					// 添加错误处理
					pc.onerror = function(error) {
						console.error("PeerConnection error:", error);
					};

					// 添加协商需要的处理
					pc.onnegotiationneeded = function() {
						console.log("Negotiation needed");
					};

				} else if (data.type == 'star') {

				} else {
					if (data.data != null) {
						this.noFace = this.zhushou.imgurl;
						this.isFace = false;
						uni.showModal({
							showCancel: false,
							title: '连接失败',
							content: '凭证获取失败,无法连接动态智能体,即将以静态方式进行展示。',
						});
					}
				}
			},
			islogin() {
				if (this.loginToken == '') {
					uni.navigateTo({
						url: '/minePages/login'
					})
				}
			},
			myfocus(id, mytype) {
				var that = this;
				if (mytype == 1) {
					uni.showModal({
						title: '提示',
						content: '是否确定收藏智能体?',
						success: function(res) {
							if (res.confirm) {
								let formData = {
									zsid: id,
									userid: that.userInfo.userid,
									type: mytype
								};
								that.$Request.postApi("/module.php?m=aichat_zhushou_user&a=use&ajax=1",
									formData).then((res) => {
									if (res.error == 0) {
										uni.showToast({
											title: '收藏成功',
											icon: 'none',
											duration: 1000
										});
										let swnum = 0;
										that.swiperList.forEach((swiper, index) => {
											if (swiper.zsid == id) {
												that.swiperList[swnum].focus = 1;
											}
											swnum++;
										});
									} else {
										uni.showModal({
											showCancel: false,
											title: '收藏失败',
											content: res.message,
										});
									}
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '是否确定取消收藏智能体?',
						success: function(res) {
							if (res.confirm) {
								let formData = {
									zsid: id,
									userid: that.userInfo.userid,
									type: mytype
								};
								that.$Request.postApi("/module.php?m=aichat_zhushou_user&a=use&ajax=1",
									formData).then((res) => {
									if (res.error == 0) {
										uni.showToast({
											title: '取消收藏成功',
											icon: 'none',
											duration: 1000
										});
										let swnum = 0;
										that.swiperList.forEach((swiper, index) => {
											if (swiper.zsid == id) {
												that.swiperList[swnum].focus = 0;
											}
											swnum++;
										});
									} else {
										uni.showModal({
											showCancel: false,
											title: '取消收藏失败',
											content: res.message,
										});
									}
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			getAllData() {
				let formData = {
					linkUserid: this.userid,
					showzsid: this.showzsid,
				};
				this.$Request.getApi("/module.php?m=aichat_zhushou&a=list&ajax=1&per_page=0&catid=0&&type=recommend",
					formData).then((res) => {
					if (res.error == 0) {
						this.swiperList = res.data.list
						if (this.showzsid == 0) {
							this.showCurrent = 0;
							this.cardCur = 0;
						} else {
							let swnum = 0;
							this.swiperList.forEach((swiper, index) => {
								if (swiper.zsid == this.showzsid) {
									this.showCurrent = swnum;
									this.cardCur = swnum;
									console.log('swnum:', swnum);
								}
								swnum++;
							});
						}
						this.zsid = this.swiperList[this.showCurrent].zsid;
						this.zhushou = this.swiperList[this.showCurrent];
						this.role_name = this.swiperList[this.showCurrent].title;
						this.role_desc = this.swiperList[this.showCurrent].description;
						this.voiceId = this.swiperList[this.showCurrent].content;
						this.showTimbre = this.swiperList[this.showCurrent].timbre;
						uni.webView.postMessage({
							data: {
								action: '切换',
								data: this.zsid,
							}
						});
						let formData2 = {
							userid: this.userid,
							zsid: this.zsid
						};
						this.$Request.postApi("/module.php?m=aichat_bchat&a=getMsg&ajax=1", formData2).then((
							res2) => {
								if (res2.error == 0) {
									this.list = res2.data.msgList;
									this.zhushou = res2.data.zhushou;
									this.role_name = res2.data.zhushou.title;
									this.role_desc = res2.data.zhushou.description;
									this.voiceId = res2.data.zhushou.content;
									this.getMsgData();
									this.initScrollBar();
								}
							});
					} else {
						uni.showModal({
							showCancel: false,
							title: '获取数据失败',
							content: res.message,
						});
					}
				});
			},
			handleTouchStart(e) {
				// console.log("handleTouchStart切换:",e);
				// this.startX = e.touches[0].pageX; // 记录开始位置
				this.isNextFace = true;
			},
			handleTouchEnd(e) {
				// console.log("handleTouchEnd切换:",e);
			},
			delayedFunction(callback, delay) {
				// 如果之前的定时器存在，先清除它
				if (this.hmtimer) {
					clearTimeout(this.hmtimer);
					this.hmtimer = null; // 清除后将timer置为null
				}

				// 设置新的定时器
				this.hmtimer = setTimeout(() => {
					callback(); // 执行回调函数
					this.hmtimer = null; // 执行完毕后将timer置为null
				}, delay);
			},
			// cardSwiper
			cardSwiper(e) {
				var that = this;
				if (this.showCurrent == 9) {
					this.showzsid = this.swiperList[0].zsid;
					this.getAllData();
				}
				this.msgtext = "";
				this.isNextFace = false;
				this.cardCur = e.detail.current;
				this.showCurrent = e.detail.current;
				this.zsid = this.swiperList[this.cardCur].zsid;
				this.zhushou = this.swiperList[this.cardCur];
				this.role_name = this.swiperList[this.cardCur].title;
				this.role_desc = this.swiperList[this.cardCur].description;
				this.voiceId = this.swiperList[this.cardCur].content;
				this.showTimbre = this.swiperList[this.cardCur].timbre;

				this.initScrollBar();
				console.log("切换:", e.detail.current);
				uni.setStorageSync('showCurrent', this.zsid);
				this.showzsid = this.zsid;
				uni.webView.postMessage({
					data: {
						action: '切换',
						data: this.zsid,
					}
				});
				this.isFace = true;
				this.linkhm = true;
				this.linktime = 0;
				// 关闭已有的连接
				dataChannel = null;
				audioElement = null;
				videoElement = null;

				isTransmitting = true;
				// const stopMessage = JSON.stringify({
				// 	type: 'stop'
				// });
				// dataChannel.send(stopMessage);

				let formData2 = {
					userid: this.userid,
					zsid: this.zsid
				};
				this.$Request.postApi("/module.php?m=aichat_bchat&a=getMsg&ajax=1", formData2).then((res2) => {
					if (res2.error == 0) {
						this.list = res2.data.msgList;
						this.zhushou = res2.data.zhushou;
						this.role_name = res2.data.zhushou.title;
						this.role_desc = res2.data.zhushou.description;
						this.voiceId = res2.data.zhushou.content;
					} else {
						this.list = [];
					}
				});

				this.delayedFunction(() => {
					let date2 = {
						client_id: that.clientid,
					};
					// let date2 = null;
					that.abortController = new AbortController();
					that.turnoptions = {
						myDate: date2,
						signal: that.abortController.signal,
						url: that.apibaseurl + 'imagehuman-get-turn-credentials'
					};
				}, 1600);

				// for (let i = 0; i < this.swiperList.length; i++) {
				//   const videoContext = uni.createVideoContext(`video-${this.swiperList[i]['id']}`, this)
				//   if (i === this.cardCur) {
				//     // #ifdef H5
				//     videoContext.play()
				//     // #endif
				//     // #ifndef H5
				//     videoContext.play()
				//     // #endif

				//   } else {
				//     // #ifdef MP-WEIXIN
				//     videoContext.stop()
				//     // #endif
				//     // #ifndef MP-WEIXIN
				//     videoContext.pause()
				//     // #endif
				//   }
				// }
			},
			// 暂停所有视频
			// stopAllVideo() {
			//   this.current = 0
			// },
			// tab选项卡切换
			tabChange(index) {
				this.current = index
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// 初始化滚动
			initScrollBar() {
				// this.bottomSize = 180;
				setTimeout(() => {
					this.scrollViewId = ''
					setTimeout(() => {
						this.scrollViewId = 'bottom'
						setTimeout(() => {
							this.scrollViewId = ''
						}, 100)
					}, 100)
				}, 100)
			},
			// 监听输入聚焦
			inputFocus(e) {
				this.setScrollHeight(e.detail.height)
				this.initScrollBar()

				uni.onKeyboardHeightChange(res => {
					this.setScrollHeight(res.height)
					this.initScrollBar()
				})
			},
			// 设置scroll的高度
			setScrollHeight(descHeight = 0) {
				// #ifdef MP-WEIXIN
				this.scrollHeight = `calc(100vh - 110rpx - ${descHeight}px)`
				// #endif
				// #ifdef APP-PLUS
				this.scrollHeight = `calc(100vh - 110upx - ${descHeight}px)`
				// #endif
				// #ifdef H5
				this.scrollHeight = `calc(50vh - 110upx - 88rpx - ${descHeight}px)`
				// #endif
			},
			// 切换选择
			togglePicker(height = 0, type = '') {
				this.showEmoji = false
				this.showFile = false
				let status = height > 0 ? true : false

				switch (type) {
					case 'emoji':
						this.showEmoji = status;
						break
					case 'file':
						this.showFile = status;
						break
				}

				if (this.showFile) {
					this.bottomSize = 340;
				} else {
					this.bottomSize = 180;
				}

				setTimeout(() => {
					this.setScrollHeight(height)
					this.initScrollBar()
				}, 50)
			},
			// 切换语音与编辑
			toggleEdit(bool) {
				this.isEdit = bool
				this.isFocus = bool
				// this.setScrollHeight(0)
			},
			// 开始录音
			startVoice() {
				console.log('开始录音');
				this.showVoice = true;
				stompClient.send("/app/v1/chat", {}, JSON.stringify({
					'content': '1',
					'from': 'agent_' + this.zhushou.id + '_stop'
				}));

				if (dataChannel && dataChannel.readyState === 'open') {
					if (this.sendnumf != 0) {
						isTransmitting = false;
						const stopMessage = JSON.stringify({
							type: 'stop'
						});
						dataChannel.send(stopMessage);
					}
					console.log('Stop message sent');
				} else {
					console.log('DataChannel not available or not open');
				}

				//h5向app传参，触发事件
				uni.webView.postMessage({
					data: {
						action: '开始录音',
					}
				});
				// this.recorderManager.start()
				// const recorderManager = uni.getRecorderManager()
				// recorderManager.start({format:"wav"})
				// this.record.start().then(() => {
				//   this.recording = true;
				// });
			},
			// 结束录音
			endVoice() {
				console.log('结束录音');
				this.showVoice = false;
				//h5向app传参，触发事件
				uni.webView.postMessage({
					data: {
						action: '结束录音',
					},
				});
				// const recorderManager = uni.getRecorderManager()
				// recorderManager.stop()
				// this.record.stopToText({ model: "16k_zh" }).then((text) => {
				//     console.log(text);
				//   }).finally(() => {
				//     this.recording = false;
				//   });
			},
			// 上传
			upload(filePath) {
				// this.$util.loading('上传中')
				uni.uploadFile({
					url: "https://tk.cycyai.com:6501/api/core/user/upload",
					name: 'file',
					filePath,
					formData: {
						userId: "168168168"
					},
					success: res => {
						uni.hideLoading()
						let data = JSON.parse(res.data)
						// this.pushMessage(data.data, 'voice')
					},
					fail: err => {
						uni.hideLoading()
					}
				})
			},
			// 播放录音
			playVoice(item) {
				// if(this.voicePlayingId){
				// 	this.voicePlayingId = ''
				// }else{
				// 	this.voicePlayingId = item.id
				// 	innerAudioContext.src = item.content
				// 	innerAudioContext.play()
				// }
			},
			// 长按
			longPress(msg) {
				// this.record.start().then(() => {
				//   recording = true;
				// });

				// this.record.stopToText("16k_zh").then((text) => {
				//     console.log(text);
				//   }).finally(() => {
				//     recording = false;
				//   });

				// let data = {
				// 	type: 'single',
				// 	source: this.fromUserId,
				// 	dest: this.toUserId,
				// 	timestamp: new Date().getTime(),
				// 	msg: {
				// 		id: msg.id,
				// 		fromUserId: msg.fromUserId,
				// 		toUserId: msg.toUserId,
				// 		type: 'cancel',
				// 		content: msg.content
				// 	}
				// }

				// uni.sendSocketMessage({
				// 	data: JSON.stringify(data),
				// 	success: res=>{
				// 		// 撤销本地消息
				// 		this.list = this.list.map(item=>{
				// 			item.type = item.id == msg.id ? 'cancel' : item.type
				// 			return item
				// 		})
				// 	}
				// })
			},
			// 获取位置
			getLocation() {
				uni.getLocation({
					success: res => {
						let {
							latitude,
							longitude
						} = res
						uni.chooseLocation({
							latitude,
							longitude,
							success: chooseRes => {
								this.pushMessage(JSON.stringify(chooseRes), 'map')
							}
						})
					}
				})
			},
			// 打开位置
			openLocation(content) {
				let {
					latitude,
					longitude
				} = JSON.parse(content)
				uni.openLocation({
					latitude,
					longitude
				})
			},
			// 发送图片
			uploadImage(sourceType = ['album']) {
				uni.chooseImage({
					sourceType,
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;

						tempFilePaths.forEach(temp => {
							this.$util.loading('上传中')
							uni.uploadFile({
								url: this.$api.upload,
								filePath: temp,
								formData: {
									userId: this.fromUserId
								},
								name: 'file',
								header: this.$util.getHeader(),
								success: uploadRes => {
									uni.hideLoading()
									let data = JSON.parse(uploadRes.data)
									this.pushMessage(data.data, 'image')
								},
								fail: err => {
									uni.hideLoading()
								}
							})
						})
					}
				})
			},
			// 视频通话
			video() {
				// console.log(this.session);
				// let date = {
				//     session: this.session
				// };
				// this.$Request.postT("/api/core/user/lpostop",date).then((res) => {
				// 	console.log(res);
				// 	player.stop();
				// 	this.session = null;
				// });
				uni.webView.postMessage({
					data: {
						action: '视频通话',
					}
				});
				this.isVideo = true;
				// this.showVoice = true;
				// this.nextCas.changeCamera({ x: 0, y: 1.65, z: 0.58 },{ x: 0, y: 1.61, z: -0.45 },100);
			},
			close() {
				// this.nextCas.changeCamera({ x: 0, y: 1.65, z: 1.6 },{ x: 0, y: 1.61, z: 1.2 },500);
				uni.webView.postMessage({
					data: {
						action: '结束通话',
					}
				});
				if (this.showVoice == true) {
					this.endVoice();
				}
				// this.showVoice = false;
				this.isVideo = false;
			},
			// 发送消息
			send() {
				// 初始化滚动条
				this.initScrollBar()
				// cb ? cb() : this.togglePicker(0, 'file')
				// this.nextCas.changeCamera({ x: 0, y: 1.65, z: 1.6 },{ x: 0, y: 1.61, z: 1.2 },500);
				this.abortFetch();
				this.beReset();
				this.isSend = true;
				this.sendMsg(this.content, 'user');
				uni.setStorageSync('token', this.tokenInfo);
				let voiceEncoding = "pcm";
				this.voiceId = this.zhushou.content;

				var that = this;
				// let date = {
				//     query: this.content,
				//     user_uuid: this.userid,
				//     // role: this.role,
				// 	role_name: this.role_name,
				// 	role_desc: this.role_desc,
				// 	voice_id: this.voiceId,
				// 	voice_encoding: voiceEncoding,
				// };

				that.sendnumf = 0;

				if (dataChannel && dataChannel.readyState === 'open') {
					if (that.sendnumf != 0) {
						isTransmitting = false;
						const stopMessage = JSON.stringify({
							type: 'stop'
						});
						dataChannel.send(stopMessage);
					}
					console.log('Stop message sent');
				} else {
					console.log('DataChannel not available or not open');
				}

				// var message = this.content;
				console.log('sendButton');

				function log(message) {
					console.log(message);
				}

				// Utility: Split string into chunks
				function splitStringIntoChunks(str, chunkSize) {
					const chunks = [];
					for (let i = 0; i < str.length; i += chunkSize) {
						chunks.push(str.slice(i, i + chunkSize));
					}
					return chunks;
				}

				// Send large message handler
				function sendLargeMessage(dataChannel, message, chunkSize = 16000) {
					const chunks = splitStringIntoChunks(message, chunkSize);
					const totalChunks = chunks.length;

					chunks.forEach((chunk, index) => {
						const messageToSend = JSON.stringify({
							type: 'chunk',
							index: index,
							total: totalChunks,
							data: chunk
						});
						if (isTransmitting) {
							dataChannel.send(messageToSend);
						}
					});

					const endMessage = JSON.stringify({
						type: 'end'
					});
					if (isTransmitting) {
						dataChannel.send(endMessage);
					}
				}

				// 工具函数：睡眠指定时间（毫秒）
				function sleep(ms) {
					return new Promise(resolve => setTimeout(resolve, ms));
				}

				async function testRoleCustomTextAudioStream(query, userUuid, roleName, roleDesc, voiceId, voiceEncoding) {
					const HTTP = 'https://ai.cycyai.com:8000';
					const url = `${HTTP}/api/role/custom-stream-text-audio`;

					isTransmitting = true;

					const requestBody = {
						query: query,
						user_uuid: userUuid,
						role_name: roleName,
						role_desc: roleDesc,
						voice_id: voiceId,
						voice_encoding: voiceEncoding
					};

					let buffer = '';

					let myendMessage = JSON.stringify({
						type: 'end'
					});
					dataChannel.send(myendMessage);

					that.abortController = new AbortController();

					try {
						const response = await fetch(url, {
							signal: that.abortController.signal,
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify(requestBody)
						});

						if (response.ok) {
							log(`[${userUuid}] Request started, status: ${response.status}`);

							const reader = response.body.getReader();
							const decoder = new TextDecoder('utf-8');

							while (true) {
								const {
									done,
									value
								} = await reader.read();
								if (done) break;

								const chunk = decoder.decode(value, {
									stream: true
								});
								buffer += chunk;

								let jsonIndex;
								while ((jsonIndex = buffer.indexOf('<Json>')) !== -1) {
									log("Detected <Json> separator");

									const jsonObject = buffer.substring(0, jsonIndex).trim();
									buffer = buffer.substring(jsonIndex + '<Json>'.length);

									try {
										const data = JSON.parse(jsonObject);
										const textChunk = data.text || "";
										const audioChunk = data.audio || "";

										console.log(`textChunk:`, textChunk);
										console.log(`audioChunk:`, audioChunk);
										if (textChunk != "<End>") {
											that.sendMsg(textChunk, 'assistant');
											that.sendnumf++;
										} else {
											that.sendnumf = 0;
										}
										// assistant = assistant + audioChunk;

										const messageToSend = JSON.stringify({
											text: textChunk,
											audio: audioChunk
										});

										if (dataChannel.readyState === 'open') {
											log(`DataChannel is open`);
											sendLargeMessage(dataChannel, messageToSend);
											log(`Data sent via DataChannel`);
										} else {
											log('DataChannel not open, message queued');
											messageQueue.push(messageToSend);
										}

										await sleep(3000);
									} catch (err) {
										log(`JSON parsing error: ${jsonObject}, Error: ${err.message}`);
									}
								}
							}

						} else {
							const errorText = await response.text();
							log(`Error: ${response.status}, ${errorText}`);
						}

					} catch (error) {
						log(`Request failed: ${error.message}`);
					}
				}
				var message = this.content;

				if (message) {
					const query = message;
					const userUuid = this.userid;
					const roleName = this.role_name;
					const roleDesc = this.role_desc;
					const voiceId = this.voiceId;
					const voiceEncoding = "pcm"; // 或 "wav"

					testRoleCustomTextAudioStream(query, userUuid, roleName, roleDesc, voiceId, voiceEncoding);
					this.content = '';
					messageInput.value = ""; // 清空输入框
				}

				// 如果需要直接发送输入框的内容，可以启用以下代码
				// var messageInput = document.getElementById('messageInput');
				// var message = messageInput.value;
				// if (message) {
				//   dataChannel.send(message);
				//   console.log("Sent message to server:", message);
				//   messageInput.value = ""; // 清空输入框
				// }

				// this.testRoleCustomTextAudioStream(this.content, this.userid, this.role_name, this.role_desc, this.voiceId, voiceEncoding);
				// let date2 = null;
				// this.abortController = new AbortController();
				// this.options = {
				//     myDate: date,
				// 	signal: this.abortController.signal,
				// 	url: 'https://ai.cycyai.com:8000/api/role/custom-stream-text-audio'
				// };

				//       const url = 'http://47.92.138.153:8000/api/role/custom-stream-text-audio';
				//       let eventData = ''; 
				// let XFsession = this.session;
				//       // 发送 POST 请求
				//       const body = {
				//     query: this.content,
				//     user_uuid: "0001",
				//     // role: this.role,
				// 	role_name: this.role_name,
				// 	role_desc: this.role_desc,
				// 	voice_id: this.voiceId,
				// 	voice_encoding: "pcm"
				// };

				//    fetch(url, {
				//      method: 'POST', // 请求方法
				//      headers: {
				//        'Content-Type': 'application/json' // 设置请求的 Content-Type
				//      },
				//      body: JSON.stringify(body) // 将请求体转换为 JSON 字符串
				//    })
				//    .then(response => {
				//         if (response.body) {
				//              // 将body属性转换为ReadableStream
				//              const reader = response.body.getReader();
				//              // 处理流数据
				//              reader.read().then(function processData({ done, value }) {
				//                if (done) {
				//                  console.log('No more data to process');
				//                  return;
				//                }
				// const chunk = new TextDecoder().decode(value, { stream: !done })
				// // console.log(chunk);
				// const lines = chunk.split('<Json>') // 逐条解析后端返回数据
				// if(lines.length == 1){
				// 	eventData = eventData + lines[0];
				// }else{
				// 	eventData = eventData + '"}';
				// 	let obj2 = JSON.parse(eventData);
				// 	date2 = {
				// 		session: XFsession,
				// 		audio: obj2.audio
				// 	};
				// 	console.log("next:",obj2.text);

				// 	globalVar = obj2.text;
				// 	eventData = '';
				// }
				//                // 这里可以处理流数据，例如将其作为二进制数据保存到文件中
				//                // 假设我们要将数据保存到一个变量中
				//                let chunks = [];
				//                chunks.push(value);

				//                // 继续读取流数据
				//                return reader.read().then(processData);
				//              });
				//        }
				//    })
				//    .then(data => {
				//      console.log(data);
				//    })
				//    .catch(error => {
				//      console.error('请求出错:', error);
				//    });

				// this.$Request.postJson("/api/role/stream-text-audio", date).then((res) => {
				// this.$Request.postJson("/api/role/custom-stream-text-audio", date).then((res) => {
				// 	// let date2 = {
				// 	//     text: res
				// 	// };
				// 	// this.$Request.postT("/api/core/user/tts", date2).then((res2) => {
				// 	// this.$Request.postJsonH("/api/v1/tts", date2).then((res2) => {
				// 		// console.log(res2);
				// 		// res2.data.ttsInfo.replace(/\\/g, '\');
				// 		// var obj = JSON.parse(res.data.audio);
				// 		// console.log(obj);
				// 		// const arrayBuffer = uni.base64ToArrayBuffer(obj.data);
				// 		// const innerAudioContext = wx.createInnerAudioContext();
				// 		// innerAudioContext.src = obj.data;
				// 		// const arrayBuffer = uni.base64ToArrayBuffer('data:audio/mp3;base64,'+ obj.data);
				// 		// innerAudioContext.play();
				// 		// const arrayBuffer = innerAudioContext.src;
				// 		// console.log(arrayBuffer);
				// 		console.log('分段数据:', res);
				// 		let obj = res.split('<Json>');
				// 		for (let i = 0; i < obj.length-1; i++) {
				// 			date2 = null;
				// 			let obj2 = JSON.parse(obj[i]);
				// 			if (i == obj.length-2) {
				// 				console.log("last:",obj2.text);
				// 			}else{
				// 				// setTimeout(() => {
				// 				  date2 = {
				// 				      session: this.session,
				// 				  	  audio: obj2.audio
				// 				  };
				// 				  console.log("next:",obj2.text);
				// 				  this.$Request.postT("/api/core/user/lpoaudioctrl",date2).then((res2) => {
				// 				  	console.log(res2);
				// 				  });
				// 				// }, 15000);
				// 			}
				// 		}
				// 		// console.log(obj);
				// 		//   this.nextCas.speakByAudio(res.data.audio, {
				// 		//     onEnd: () => {
				// 		//       console.log("结束");
				// 		//     },
				// 		//     onStart: () => {
				// 		//       console.log("开始");
				// 		//     },
				// 		//   });
				// 	// });
				//     // console.log(res);
				// 	// this.nextCas.speak(res, {
				// 	//   onEnd: () => {
				// 	//     console.log("onEnd");
				// 	//   },
				// 	//   onStart: () => {
				// 	//     console.log("onStart");
				// 	//   },
				// 	// });
				// });
				// this.nextCas.ask(this.content);
				this.content = '';
				// this.isSend = false;
				this.pushMessage(this.content, 'text', () => {
					this.content = ''
				})
			},
			ask(content) {
				// this.nextCas.changeCamera({ x: 0, y: 1.65, z: 1.6 },{ x: 0, y: 1.61, z: 1.2 },500);
				this.isSend = true;
				this.sendMsg(content, 'user');
				uni.setStorageSync('token', this.tokenInfo);
				let voiceEncoding = "pcm";
				this.voiceId = this.zhushou.content;
				let date = {
					query: this.content,
					user_uuid: this.userid,
					// role: this.role,
					role_name: this.role_name,
					role_desc: this.role_desc,
					voice_id: this.voiceId,
					voice_encoding: voiceEncoding,
				};
				// let date2 = null;

				this.options = {
					myDate: date,
				};
				// this.$Request.postJson("/api/role/stream-text-audio", date).then((res) => {
				// this.$Request.postJson("/api/role/custom-stream-text-audio", date).then((res) => {	
				// 			const stream = this.nextCas.createSpeakAudioStream();

				// 			stream.onEnd = () => {
				// 			  console.log("演讲开始");
				// 			};
				// 			stream.onEnd = () => {
				// 			  console.log("演讲结束");
				// 			};

				// 			let obj = res.split('<Json>');
				// 			let obj2 = null;
				// 			for (let i = 0; i < obj.length-1; i++) {
				// 				obj2 = JSON.parse(obj[i]);
				// 				if (i == obj.length-2) {
				// 					console.log("last:",obj2.text);
				// 				    stream.last();
				// 				}else{
				// 					console.log("next:",obj2.text);
				// 					stream.next(obj2.audio);
				// 				}
				// 			}
				// 		});
				// this.nextCas.ask(this.content);
				this.content = '';
				this.pushMessage(this.content, 'text', () => {
					this.content = ''
				})
			},
			// 推送消息
			pushMessage(content, type = 'text', cb = () => {}) {
				// 组合消息体：需要保存在本地数据库的数据
				let msgData = {
					fromUserId: this.fromUserId,
					userFace: uni.getStorageSync('userFace'),
					toUserId: this.toUserId,
					type,
					content
				}

				// 本地保存
				// uni.request({
				// 	method: 'POST',
				// 	url: this.$api.addSingleMsg,
				// 	data: msgData,
				// 	header: this.$util.getHeader(),
				// 	success: res=>{
				// 		if(res.data.code){
				// 			return this.$util.toast(res.data.code)
				// 		}
				// 		let msgId = res.data.data

				// 		// 判断是否为非文本
				// 		if(!['text', 'map'].includes(type)){
				// 			msgData.content = this.$api.staticPath + msgData.content
				// 		}

				// 		// 发送单聊消息
				// 		this.$xbcim.sendSingle({
				// 			content: msgData.content,
				// 			msgType: type,
				// 			source: this.fromUserId,
				// 			target: this.toUserId,
				// 			extra: {
				// 				id: msgId,
				// 				userFace: uni.getStorageSync('userFace')
				// 			}
				// 		})

				// 		// 加入信息
				// 		this.list.push({
				// 			source: this.fromUserId,
				// 			target: this.toUserId,
				// 			content: msgData.content,
				// 			userFace: uni.getStorageSync('userFace'),
				// 			type: 'single',
				// 			msgType: type
				// 		})

				// 		// 初始化滚动条
				// 		this.initScrollBar()
				// 		cb ? cb() : this.togglePicker(0, 'file')
				// 	}
				// })
			},
			// 获取记录
			getList() {
				// uni.request({
				// 	url: this.$api.getSingleRecord,
				// 	data: {
				// 		fromUserId: this.fromUserId,
				// 		toUserId: this.toUserId
				// 	},
				// 	header: this.$util.getHeader(),
				// 	success: res=>{
				// 		this.list = res.data.data.map(item=>{
				// 			if(['voice', 'image'].includes(item.type)){
				// 				item.content = this.$api.staticPath+item.content
				// 			}
				// 			if(item.toUserFace){
				// 				item.toUserFace = this.$api.staticPath+item.toUserFace
				// 			}

				// 			// 为了和socket的字段一致，此处做一个转换；
				// 			// 数据表字段可以直接设置为source、target和msgType
				// 			item.source = item.fromUserId
				// 			item.target = item.toUserId
				// 			item.msgType = item.type
				// 			return item
				// 		})

				// 		this.scrollViewId = ''
				// 		setTimeout(()=>{
				// 			this.scrollViewId = 'bottom'
				// 			setTimeout(()=>{this.scrollViewId = ''}, 100)
				// 		}, 100)
				// 	}
				// })
			},
			// 震动跳转
			navEdit(e) {
				wx.vibrateLong();
				uni.navigateTo({
					url: '/circlePages/edit'
				})
			},
			// 震动跳转
			navCreate(e) {
				wx.vibrateLong();
				uni.navigateTo({
					url: '/circlePages/create'
				})
			},
			// 震动跳转
			navBuild(e) {
				wx.vibrateLong();
				uni.navigateTo({
					url: '/circlePages/build'
				})
			},
			// 处理内容，给内容添加对应的标识信息
			initContentData() {
				this.content.forEach((item, index) => {
					// 是否需要隐藏内容
					item.hideContent = false
					// 显示所有内容
					item.showAllContent = false
					// 内容容器的实际高度
					item.contentContainerHeight = 0
					// 内容容器是否初始化完成
					item.contentContainerInit = false
					this.$set(this.content, index, item)
				})
			},
			// 获取内容容器的信息
			getContentRectInfo() {
				let contentRect = {}
				const query = uni.createSelectorQuery().in(this)
				// 筛选出存在内容的数据
				// this.content.forEach((item, index) => {
				//   if (item?.content) {
				//     query.select(`#blogger__content--${index}`).boundingClientRect()
				//     contentRect[index] = item
				//   }
				// })
				// 获取所有内容的宽高信息
				query.exec(res => {
					if (!res) {
						setTimeout(() => {
							this.getContentRectInfo()
						}, 10)
						return
					}
					// console.log(res);
					res.map((item) => {
						// console.log(item.height, this.contentHideShowHeight);
						// 获取对应的标号
						const id = item.id
						const idIndex = /blogger__content--(\d)/.exec(id)[1]
						let contentItem = this.content[idIndex]
						contentItem.hideContent = item.height > this.contentHideShowHeight
						contentItem.showAllContent = false
						contentItem.contentContainerHeight = item.height
						contentItem.contentContainerInit = true
						this.$set(this.content, idIndex, contentItem)

						// console.log(/blogger__content--(\d)/.exec(id)[1]);
					})
				})
			},
			// 切换内容的显示与隐藏
			switchContentShowStatus(index) {
				const contentItem = this.content[index]
				contentItem.showAllContent = !contentItem.showAllContent
				this.$set(this.content, index, contentItem)
			},

			// 弹出压屏窗
			showLandscape() {
				this.openLandscape()
			},
			// 打开压屏窗
			openLandscape() {
				// wx.vibrateLong();
				this.show2 = true
			},
			// 关闭压屏窗
			closeLandscape() {
				this.show2 = false
			},

			welcomeUser() {
				// this.$refs.liveGift.welcomeUser();
			},

			sendGift(data) {
				this.$refs.liveGift.sendGift(data.index);
			},

			sendLiveMsg(data) {
				this.$refs.liveMsg.sendLiveMsg(data.msg);
			},
			closeSearchModel(e) {
				if (e == "true") {
					this.boxShow = true;
				} else if (e == "false") {
					this.boxShow = false;
				}
			},
		}
	}
</script>

<script module="renderScript" lang="renderjs">
	export default {
		methods: {
			onChange(newValue, oldValue, ownerInstance) {
				const url = 'https://ai.cycyai.com:8000/api/role/custom-stream-text-audio';
				let eventData = '';
				let myframe = 0;
				let prompt = '';
				let end = 0;
				fetch(newValue.url, {
						signal: newValue.signal,
						method: 'POST', // 请求方法
						headers: {
							'Content-Type': 'application/json' // 设置请求的 Content-Type
						},
						body: JSON.stringify(newValue.myDate) // 将请求体转换为 JSON 字符串
					})
					.then(response => {
						if (response.body) {
							// 将body属性转换为ReadableStream
							const reader = response.body.getReader();
							// 处理流数据
							reader.read().then(function processData({
								done,
								value
							}) {
								if (done) {
									console.log('No more data to process');
									return;
								}
								const chunk = new TextDecoder().decode(value, {
									stream: !done
								})
								// console.log(chunk);
								const lines = chunk.split('<Json>') // 逐条解析后端返回数据
								// console.log(lines);
								if (lines.length == 1) {
									eventData = eventData + lines[0];
								} else if (lines.length == 2) {
									eventData = eventData + lines[0];
									// eventData = eventData + '"}';
									// console.log(eventData);
									let obj2 = JSON.parse(eventData);
									console.log("next:", obj2.text);
									if (obj2.text == "<End>") {
										prompt = prompt;
										end = 1;
									} else {
										prompt = prompt + obj2.text;
									}
									if (myframe > 1) {
										myframe = 1;
									}
									ownerInstance.callMethod('acceptData', {
										type: 'success',
										audio: obj2.audio,
										frame: myframe,
										prompt: prompt,
										end: end
									})
									myframe = myframe + 1;
									eventData = '';
								} else {
									eventData = eventData + lines[0];
									// eventData = eventData + '"}';
									// console.log(eventData);
									let obj2 = JSON.parse(eventData);
									console.log("next:", obj2.text);
									if (obj2.text == "<End>") {
										prompt = prompt;
									} else {
										prompt = prompt + obj2.text;
									}
									if (myframe > 1) {
										myframe = 2;
									}
									end = 1;
									ownerInstance.callMethod('acceptData', {
										type: 'success',
										audio: obj2.audio,
										frame: myframe,
										prompt: prompt,
										end: end
									})
									myframe = myframe + 1;
									eventData = '';
								}
								// 这里可以处理流数据，例如将其作为二进制数据保存到文件中
								// 假设我们要将数据保存到一个变量中

								// 继续读取流数据
								return reader.read().then(processData);
							});
						}
					})
					.catch(error => {
						ownerInstance.callMethod('acceptData', {
							type: 'error'
						})
					});

			},
			checkConnectionStatus(newValue, oldValue, ownerInstance) {
				const url = 'https://human.cycyai.com:8881/work1091/imagehuman-connection-status';
				let eventData = '';
				let myframe = 0;
				let prompt = '';
				let end = 0;
				if (newValue.url != '') {
					fetch(newValue.url, {
							signal: newValue.signal,
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify(newValue.myDate) // 将请求体转换为 JSON 字符串
						})
						.then(response => response.json())
						.then(data => {
							if (!data.connected) {
								ownerInstance.callMethod('acceptStatusData', {
									type: 'success',
									data: data
								});
							} else {
								ownerInstance.callMethod('acceptStatusData', {
									type: 'error',
									data: data
								});
							}
						})
						.catch(error => {
							console.error('Error checking connection status:', error);
							ownerInstance.callMethod('acceptStatusData', {
								type: 'error',
								data: error
							});
						});

				} else {
					ownerInstance.callMethod('acceptStatusData', {
						type: 'star'
					});
				}
			},
			getTurnCredentials(newValue, oldValue, ownerInstance) {
				const url = 'https://human.cycyai.com:10803/imagehuman-get-turn-credentials';
				let eventData = '';
				let myframe = 0;
				let prompt = '';
				let end = 0;
				if (newValue.url != '') {
					fetch(newValue.url, {
							signal: newValue.signal,
							method: 'POST',
							headers: {
								'Content-Type': 'application/json'
							},
							body: JSON.stringify(newValue.myDate) // 将请求体转换为 JSON 字符串
						})
						.then(response => response.json())
						.then(data => {
							if (data.status === 403) {
								ownerInstance.callMethod('acceptTurnData', {
									type: 'error',
									data: null
								});
							} else {
								ownerInstance.callMethod('acceptTurnData', {
									type: 'success',
									data: data
								});
							}
						})
						.catch(error => {
							// console.error('Error fetching TURN credentials:', error);
							ownerInstance.callMethod('acceptTurnData', {
								type: 'error',
								data: null
							});
						});

				} else {
					ownerInstance.callMethod('acceptTurnData', {
						type: 'star'
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-video-container {
		height: auto !important;
		/* 使用!important确保优先级更高 */
	}

	.template-reserve {}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 20rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}
	}

	page {
		margin: 0;
		padding: 0;
		background: #262626;
	}

	.section {
		background: white;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		width: 100%;
	}

	.video-section {
		width: 100%;
	}

	video {
		width: 100%;
		border-radius: 8px;
		background: #000;
		display: block;
	}

	.qsflex-container {
		display: flex;
		flex-wrap: wrap;
		/* 关键：允许换行 */
		gap: 10rpx;
		/* 元素间距 */
	}

	.qsflex-item {
		flex: 1;
		/* 均匀分配空间 */
		min-width: 30%;
		/* 关键：控制每行3个 (100%/3 - 间隙) */
		// max-width: 32%; /* 防止内容溢出 */
		box-sizing: border-box;
		/* 确保边距不影响宽度 */
		// margin: 5rpx;
	}

	.ctxt2 {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #000;
		line-height: 22px;
		text-align: left;
		font-style: normal;
		opacity: 1;
		/* 确保文字不透明 */
	}

	.ring2 {
		position: absolute;
		top: 45%;
		left: 50%;
		width: 20px;
		transform: translate(-50%, -50%);
	}

	.ring {
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80px;
		height: 80px;
		background: transparent;
		border: 3px solid #3c3c3c;
		border-radius: 50%;
		text-align: center;
		line-height: 70px;
		font-family: sans-serif;
		font-size: 17px;
		color: #f9f9f9;
		letter-spacing: 4px;
		text-transform: uppercase;
		text-shadow: 0 0 10px #f9f9f9;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);

		text {
			display: block;
			position: absolute;
			top: calc(50% - 2px);
			left: 50%;
			width: 50%;
			height: 4px;
			background: transparent;
			transform-origin: left;
			animation: animate 2s linear infinite;
		}

		text:before {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background: #f9f9f9;
			top: -6px;
			right: -8px;
			box-shadow: 0 0 20px #f9f9f9;
		}
	}

	.ring:before {
		content: '';
		position: absolute;
		top: -3px;
		left: -3px;
		width: 100%;
		height: 100%;
		border: 3px solid transparent;
		border-top: 3px solid #f9f9f9;
		border-right: 3px solid #f9f9f9;
		border-radius: 50%;
		animation: animateC 2s linear infinite;
	}



	@keyframes animateC {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes animate {
		0% {
			transform: rotate(45deg);
		}

		100% {
			transform: rotate(405deg);
		}
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-top: 10rpx;
				padding-right: 30rpx;
				margin-left: 20rpx;
				font-size: 50rpx;
			}

			&__text {
				color: #AAAAAA;
			}
		}
	}

	.logo-image {
		width: 60rpx;
		height: 60rpx;
		position: relative;
		margin-top: -15rpx;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */
	/* 博主头像 start*/
	.image-circle {
		// padding: 95rpx;
		width: 190rpx;
		height: 190rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}


	/* 文章内容 start*/
	.blogger {
		&__item {
			padding: 30rpx;
		}

		&__author {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__desc {
			line-height: 55rpx;

			&__label {
				padding: 0 20rpx;
				margin: 0rpx 18rpx 0 0;

				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}

			&__content {}
		}

		&__content {
			margin-top: 18rpx;
			padding-right: 18rpx;

			&__data {
				line-height: 46rpx;
				text-align: justify;
				overflow: hidden;
				transition: all 0.25s ease-in-out;

			}

			&__status {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #82B2FF;
			}
		}

		&__main-image {
			border-radius: 16rpx;

			&--1 {
				max-width: 80%;
				max-height: 300rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}

		&__ad {
			width: 100%;
			height: 500rpx;
			transform: translate3d(0px, 0px, 0px) !important;

			::v-deep .uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}

			.uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}

			&__item {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-origin: left center;
				transform: translate3d(100%, 0px, 0px) scale(1) !important;
				transition: transform 0.25s ease-in-out;
				z-index: 1;

				&--0 {
					transform: translate3d(0%, 0px, 0px) scale(1) !important;
					z-index: 4;
				}

				&--1 {
					transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
					z-index: 3;
				}

				&--2 {
					transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
					z-index: 2;
				}
			}

			&__content {
				border-radius: 40rpx;
				width: 640rpx;
				height: 500rpx;
				overflow: hidden;
			}

			&__image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* 文章内容 end*/

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/

	/* 广告内容 start */
	.ad-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.ad-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20%;
	}

	/* 自定义导航栏内容 end */


	/* 全屏轮播  start*/

	.card-swiper {
		height: 100vh !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100vh;
		border-radius: 0rpx;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.card-swiper swiper-item .swiper-item-png {
		width: 100%;
		display: block;
		border-radius: 0rpx;
		transform: translate(1040rpx, 20rpx) scale(0.5, 0.5);
		transition: all 0.6s ease 0s;
		// overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-png {
		width: 900rpx;
		transform: translate(-80rpx, 0rpx) scale(1, 1);
		transition: all 0.6s ease 0s;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
	}

	.live {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.video {
		height: 100vh;
		width: 100%;
	}

	.content {
		// background: rgba(0, 0, 0, 0.6);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		transition: left 0.3s ease;
	}

	.hide {
		left: 100vw;
	}

	.header {
		position: fixed;
		top: 0rpx;
		left: 20rpx;
		right: 0;
		min-width: 750rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			.search {
				margin-right: 50rpx;
			}
		}

		.close {
			margin-right: 20rpx;
		}

		.user {
			display: flex;
			align-items: center;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 6px;
			padding: 6rpx;
			// overflow: hidden;

			.avatar {
				height: 42rpx;
				width: 42rpx;
				background-size: cover;
				/* 背景图覆盖整个容器 */
				// clip-path: circle(50% at center); /* 使用clip-path制作圆形 */
				overflow: hidden;
			}

			.username {
				color: #fff;
				font-size: 26rpx;
				font-weight: 500;
				align-self: flex-start;
			}

			.desc {
				color: #ccc;
				font-size: 22rpx;
				align-self: flex-start;
			}

			.userinfo {
				display: flex;
				flex-direction: column;
				// align-items: center;
				padding: 0 10rpx;
				color: #fff;

				.username {
					padding-left: 10rpx;
					font-size: 24rpx;
					font-weight: 500;
					align-self: flex-start;
				}

				.desc {
					color: #ccc;
					font-size: 22rpx;
					align-self: flex-start;
				}
			}

			.follow {
				// font-size: 22rpx;
				// background: linear-gradient(to right, #FF4656, #FE2B8C);
				// color: #fff;
				// width: 90rpx;
				// border-radius: 100rpx;
				// height: 60rpx;
				// line-height: 60rpx;
				// justify-content: center;
			}
		}

		.search-icon {
			margin-right: 96rpx;
		}

		.onlineuser {
			.avatar {
				position: relative;

				text {
					width: 72rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 16rpx;
					text-align: center;
					position: absolute;
					left: 2rpx;
					bottom: 0px;
					font-weight: 500;
					color: #fff;
				}

				image {
					width: 74rpx;
					height: 74rpx;
					border-radius: 100%;
					margin-right: 20rpx;
				}

				&:first-child {

					&::after {
						content: " ";
						width: 74rpx;
						height: 74rpx;
						// background-image: url(@/static/icons/shouhu.webp);
						background-size: 74rpx 74rpx;
						background-repeat: no-repeat;
						background-position: center center;
						display: block;
						position: absolute;
						left: 0px;
						top: 0px;
						z-index: 1;
					}

					text {
						border: none;
						background-image: url(https://vr0.6rooms.com/tao/i/n7/2449060832f8a39fe6772f87de1bef9d.png);
						background-size: 100% 100%;
					}
				}
			}
		}

		.title-list {
			margin-top: 10rpx;

			.title-item {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 100rpx;
				margin-right: 20rpx;
				padding: 5rpx 15rpx;

				.text {
					font-size: 24rpx;
					color: #fff;
					margin-left: 2rpx;
				}
			}
		}
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: fixed;
		// display:flex;
		display: block;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #000;
		opacity: 0.3;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		margin: 20rpx 0 !important;
		left: 95vw;
		top: -60vh;
		position: relative;
	}

	.spot.active {
		opacity: 0.6;
		height: 30rpx;
		background-color: #000;
	}

	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;
		border: 1rpx solid #F8F7F8;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			padding: 5rpx 25rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}


	/* 图标容器9 start */
	.icon9 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 110rpx;
				height: 110rpx;
				font-size: 65rpx;
				border-radius: 50%;
				margin: 20rpx 40rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg2.png);
				}
			}
		}
	}


	/* 悬浮 */
	.tnxuanfu {
		animation: suspension 3s ease-in-out infinite;
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-0.8rem);
		}
	}

	/* 悬浮按钮 */
	.button-shop {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		left: 5rpx;
		top: 5rpx;
		z-index: 1001;
		border-radius: 100px;
		opacity: 0.9;
	}


	/* 按钮 */
	.edit {
		bottom: 300rpx;
		right: 50%;
		position: fixed;
		z-index: 9999;
	}

	/* 底部 start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: env(safe-area-inset-bottom);
		z-index: 9999;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		align-items: center;
		// min-height: 130rpx;
		padding: 0;
		height: calc(170rpx + env(safe-area-inset-bottom) / 2);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	/* 头像*/
	.avatar-all {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid rgba(255, 255, 255, 0.05);
		border-radius: 50%;
		overflow: hidden;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
	}

	/* 内容*/
	.topic {
		position: relative;
		height: 100%;
		z-index: 1;
		margin-bottom: 120rpx;


		/* 表单信息 start */
		&__info {
			margin: 0 50rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(255, 255, 255, 0.1);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					width: 400rpx;
					height: 60rpx;
					border: 1rpx solid #C6D1D8;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						margin-right: 5rpx;
						color: #000000;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 30rpx;
							color: #000000;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 34rpx;
						margin-right: 20rpx;
						color: #78909C;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					width: 100%;
					height: 60rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					// text-indent: 1em;
					border-radius: 100rpx;
					color: #FFFFFF;
					background-color: rgba(255, 255, 255, 0.2);
					// border: 2rpx solid #FFFFFF;
				}

				&__sure {
					height: 60rpx;
					width: 140rpx;
				}

			}
		}

		/* 表单信息 end */

		/* 内容 end */

	}

	::v-deep.input-placeholder {
		margin-top: 10px;
		font-size: 36rpx;
		color: #000000;
	}

	::v-deep.uni-input-input {
		margin-top: 10px;
	}


	.pa,
	.pa0 {
		position: absolute
	}

	.pa0 {
		left: 0;
		top: 0
	}


	.bg0 {
		width: 100rpx;
		height: 100rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.bg1 {
		width: 100%;
		height: 100%;
	}




	.hx-box {
		top: 50%;
		left: 50%;
		width: 100rpx;
		height: 100rpx;
		transform-style: preserve-3d;
		transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);
	}

	.hx-box .pr {
		width: 100rpx;
		height: 100rpx;
		transform-style: preserve-3d;
		animation: hxz 20s linear infinite;
	}

	@keyframes hxz {
		0% {
			transform: rotateX(0deg);
		}

		100% {
			transform: rotateX(-360deg);
		}
	}



	.hx-box .pr .pa0 {
		width: 100rpx;
		height: 100rpx;
		/* border: 4px solid #5ec0ff; */
		border-radius: 1000px;
	}

	.hx-box .pr .pa0 .span {
		display: block;
		width: 100%;
		height: 100%;
		background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc4.png) no-repeat center center;
		background-size: 100% 100%;
		animation: hx 4s linear infinite;
	}

	@keyframes hx {
		to {
			transform: rotate(360deg);
		}
	}

	.hx-k1 {
		transform: rotateX(-60deg) rotateZ(-60deg)
	}

	.hx-k2 {
		transform: rotateX(-30deg) rotateZ(-30deg)
	}

	.hx-k3 {
		transform: rotateX(0deg) rotateZ(0deg)
	}

	.hx-k4 {
		transform: rotateX(30deg) rotateZ(30deg)
	}

	.hx-k5 {
		transform: rotateX(60deg) rotateZ(60deg)
	}

	.hx-k6 {
		transform: rotateX(90deg) rotateZ(90deg)
	}

	/* 用户头像 start */
	.logo-image2 {
		width: 110rpx;
		height: 110rpx;
		position: relative;
	}

	.logo-pic2 {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 内容*/
	.reserve {
		position: fixed;
		z-index: 99;
	}

	.message {
		position: relative;
		bottom: 10rpx;
		left: 20rpx;
		right: 20rpx;
		min-width: 750rpx;

		.msg-scroll {
			height: 600rpx;

			&.mask {
				-webkit-mask: -webkit-gradient(linear, left 30%, left top, from(#000), to(transparent));
			}

			.msg-item {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 100px;
				max-width: 80%;
				margin-bottom: 10rpx;
				color: #fff;
				font-size: 28rpx;
				padding: 15rpx 20rpx;
				border-radius: 20rpx;
				white-space: pre-wrap;
				align-self: flex-start;
				transition: opacity 0.3s ease;

				image {
					height: 36rpx;
					margin-right: 5rpx;
					vertical-align: middle;
				}

				.username {
					font-weight: 500;
					color: #77c4bc;
				}

				&.system {
					color: #ffffff;
				}
			}
		}
	}

	.reserve-content {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
		border-radius: 30rpx;
	}

	/* 悬浮 */
	.tnxuanfu {
		animation: suspension 3s ease-in-out infinite;
	}

	/* 悬浮按钮 */
	.button-shop {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		position: fixed;
		/* bottom:200rpx;
        right: 20rpx; */
		left: 5rpx;
		top: 5rpx;
		z-index: 1001;
		border-radius: 100px;
		opacity: 0.9;
	}


	/* 按钮 */
	.edit {
		bottom: 360rpx;
		right: 50%;
		position: fixed;
		z-index: 9999;
	}


	/* 标签 */
	.blogger {
		&__item {
			padding: 30rpx;
		}

		&__desc {
			line-height: 55rpx;

			&__label {
				padding: 0 20rpx;
				margin: 0rpx 18rpx 0 0;

				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}
		}

	}


	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(10rpx);
		-webkit-backdrop-filter: blur(10rpx);
	}

	/* 毛玻璃*/
	.dd-glass2 {
		// width: 100%;
		backdrop-filter: blur(8rpx);
		-webkit-backdrop-filter: blur(8rpx);
	}

	/* 用户头像 start */
	.user-image {
		width: 70rpx;
		height: 70rpx;
		position: relative;
	}

	.user-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 100rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		// background-color: rgba(255,255,255,0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		bottom: 4%;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 100;
	}


	/* 相册 start*/
	.slideshow {
		top: 0;
		position: fixed;
		width: 100vw;
		height: 100vh;
		// overflow: hidden;
		background: linear-gradient(to bottom, #414B8C, #1c1d21);
		z-index: 111;
	}

	.slideshow2 {
		top: 0;
		position: fixed;
		flex-direction: column;
		height: 100vh;
		object-fit: fill;
		overflow: hidden;
		z-index: 0;
	}

	.slideshow-image {
		position: fixed;
		width: 100vw;
		height: 100vh;
	}

	@-webkit-keyframes kenburns-1 {
		0% {
			opacity: 1;
			transform: scale(1.2);
		}

		1.5625% {
			opacity: 1;
		}

		23.4375% {
			opacity: 1;
		}

		26.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}

		98.4375% {
			opacity: 0;
			transform: scale(1.2117647059);
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes kenburns-1 {
		0% {
			opacity: 1;
			transform: scale(1.2);
		}

		1.5625% {
			opacity: 1;
		}

		23.4375% {
			opacity: 1;
		}

		26.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}

		98.4375% {
			opacity: 0;
			transform: scale(1.2117647059);
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes kenburns-2 {
		23.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		26.5625% {
			opacity: 1;
		}

		48.4375% {
			opacity: 1;
		}

		51.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@keyframes kenburns-2 {
		23.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		26.5625% {
			opacity: 1;
		}

		48.4375% {
			opacity: 1;
		}

		51.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@-webkit-keyframes kenburns-3 {
		48.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		51.5625% {
			opacity: 1;
		}

		73.4375% {
			opacity: 1;
		}

		76.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@keyframes kenburns-3 {
		48.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		51.5625% {
			opacity: 1;
		}

		73.4375% {
			opacity: 1;
		}

		76.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@-webkit-keyframes kenburns-4 {
		73.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		76.5625% {
			opacity: 1;
		}

		98.4375% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: scale(1);
		}
	}

	@keyframes kenburns-4 {
		73.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		76.5625% {
			opacity: 1;
		}

		98.4375% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: scale(1);
		}
	}

	/* 相册 end*/


	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 用户头像 start */
	.logo-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		// box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		// overflow: hidden;
		// background-color: #FFFFFF;
	}

	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 260rpx;
		width: 55vw;
		margin: 10rpx 0 0 0;
		border-radius: 12rpx;
	}

	/* 聊天*/
	.tnchat1 {
		border-style: solid;
		border-width: 71rpx;
		border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656388937089-assets/web-upload/9d92dfd6-3486-4be9-a933-0ae160bdfc86.png);
		border-image-slice: 71 71 71 71 fill;
		border-image-repeat: repeat;
		word-break: break-word;
		width: fit-content;
	}

	.tnchat2 {
		border-style: solid;
		border-width: 26rpx 43rpx;
		border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656471916508-assets/web-upload/e2305ffa-d1c7-435c-adae-2b3f0bc0da41.png);
		border-image-slice: 26 43 26 43 fill;
		border-image-repeat: repeat;
		word-break: break-word;
		width: fit-content;
	}

	.tnchat3 {
		border-style: solid;
		border-width: 26rpx 43rpx;
		border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656562395500-assets/web-upload/2662c10c-061b-403d-9289-1165d9ee9e7b.png);
		border-image-slice: 26 43 26 43 fill;
		border-image-repeat: repeat;
		word-break: break-word;
		width: fit-content;
	}

	.tnchat4 {
		border-style: solid;
		border-width: 26rpx 43rpx;
		border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656562336904-assets/web-upload/ad050d7f-3bdd-4de5-9e67-500f778b20e4.png);
		border-image-slice: 26 43 26 43 fill;
		border-image-repeat: repeat;
		word-break: break-word;
		width: fit-content;
	}


	.tnchat5 {
		border-style: solid;
		border-width: 26rpx 43rpx;
		border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656562607434-assets/web-upload/cf008270-2a2c-4fac-82b1-b558d8a92230.png);
		border-image-slice: 26 43 26 43 fill;
		border-image-repeat: repeat;
		word-break: break-word;
		width: fit-content;
	}

	.tnchat6 {
		border-style: solid;
		border-width: 26rpx 43rpx;
		border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656598070402-assets/web-upload/e123a1e3-6235-4d39-81d5-33d221d7a960.png);
		border-image-slice: 26 43 26 43 fill;
		border-image-repeat: repeat;
		word-break: break-word;
		width: fit-content;
	}

	.tnchat7 {
		border-style: solid;
		border-width: 26rpx 43rpx;
		border-image-source: url(https://cdn.nlark.com/yuque/0/2022/png/280373/1656602660855-assets/web-upload/9c698bba-af80-47bf-9ee4-3a78e0288fc4.png);
		border-image-slice: 26 43 26 43 fill;
		border-image-repeat: repeat;
		word-break: break-word;
		width: fit-content;
	}

	.container {
		height: 100vh;
		overflow: hidden;
	}

	/* #ifdef H5 */
	.container {
		height: calc(100vh);
	}

	/* #endif */

	.map {
		width: 60%;
		height: 300upx;
		background-color: #FFF !important;

		&::before {
			border-right: 30upx solid #FFF !important;
		}

		.title {
			height: 80upx;
			font-size: 28upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.box {
			width: 100%;
			height: 170upx;
			margin-top: 10upx;
		}
	}

	.file {
		padding: 30upx 20upx;

		.list {
			overflow: hidden;
			padding-left: 10upx;
			justify-content: flex-start;
		}

		.item {
			width: 110upx;
			height: 110upx;
			border-radius: 10upx;
			padding-left: 10upx;
			justify-content: center;
			align-items: center;
			background-color: #FFF;

			.icon {
				padding-left: 25upx;
				// justify-content: center;
				// align-items: center;
				width: 70upx;
			}

			.text {
				padding-left: 3upx;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				margin-top: 4upx;
			}
		}
	}

	.oper {
		width: 98%;
		height: 100upx;
		background: #FFFFFF;
		border-radius: 10px;
		opacity: 0.8;
		// border-top: 2upx solid #EEE;
		// border-bottom: 2upx solid #EEE;

		.input {
			height: 78upx;
			line-height: 78upx;
			padding: 9px 20upx;
			font-size: 33upx;
			border-radius: 10upx;
			background-color: #fff;
			width: 100%;
		}

		.icon {
			margin-top: 10px;
			width: 60upx;
			height: 60upx;
			// padding-left: 20upx;
		}

		.btn {
			margin-top: 10px;
			color: #fff;
			width: 120upx;
			height: 65upx;
			font-size: 33upx;
			// line-height: 50upx;
			text-align: center;
			align-items: center;
			border-radius: 10upx;
			background-color: #2BA245;
		}
	}

	/* #ifdef H5 */
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

	/* #endif */
	.scroll {
		overflow-y: auto;
		transition: all 0.1s ease;
		height: calc(100vh - 88upx - 110upx - var(--status-bar-height));

		/* #ifdef MP-WEIXIN */
		height: calc(100vh - 88upx - var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		height: calc(40vh - 88upx - 110upx - var(--status-bar-height));
		/* #endif */

		.item-space {
			height: 30upx;
		}

		.time {
			color: #666;
			font-size: 24upx;
			text-align: center;
			margin-bottom: 50upx;
		}

		.cancel {
			width: 100%;
			height: 40upx;
			text-align: center;
			margin-bottom: 50upx;

			.text {
				color: #999;
				font-size: 24upx;
			}
		}

		.item {
			margin: 0 0 10upx;
			align-items: flex-start;
			justify-content: flex-start;

			.face {
				width: 70upx;
				height: 70upx;
				border-radius: 10upx;
			}

			.content {
				background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
				color: #ffffff;
				font-size: 32upx;
				min-height: 80upx;
				border-radius: 10upx;
				padding: 26upx;
				background-color: transparent;
				word-break: break-all;
				word-wrap: break-word;
				max-width: calc(100% - 100upx);
				position: relative;
				/* #ifdef H5 */
				font-family: 'Noto Sans SC', sans-serif;
				/* #endif */



			}

			.ctxt {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #FFFFFF;
				line-height: 22px;
				text-align: left;
				font-style: normal;
				opacity: 1;
				/* 确保文字不透明 */
			}

			&.left {
				.face {
					margin-top: 5rpx;
					margin-left: -12upx;
					margin-right: -12upx;
				}

				.content {
					background: #414B8C;
					background-color: rgba(65, 75, 140, 0.4);
					border-radius: 10px;
					// opacity: 0.4;
					// background-color: transparent;
					/* #ifdef H5 */
					font-family: 'Noto Sans SC', sans-serif;
					/* #endif */



				}

				.content::before {
					left: -60upx;
				}
			}

			&.right {
				flex-direction: row-reverse;

				.face {
					margin-top: 5rpx;
					margin-right: -12upx;
					margin-left: -12upx;
				}

				.content {
					background: #000;
					background-color: rgba(0, 0, 0, 0.4);
					border-radius: 10px;
					// opacity: 0.4;
					// background-color: transparent;
					/* #ifdef H5 */
					font-family: 'Noto Sans SC', sans-serif;
					/* #endif */



				}
			}
		}

		.gcontainer {
			display: flex;
			flex-wrap: wrap;
			/* 允许换行 */
			gap: 10px;
			/* 元素间距（可选） */
		}

		.gitem {
			flex-basis: calc(33.33% - 10px);
			/* 每行3个，减去间隙 */
			/* 或者直接设置固定宽度（根据需求调整） */
			/* width: 30%; */
		}

		.logoimg {
			position: absolute;
			top: 155rpx;
			z-index: 10;
		}

		.loader {
			z-index: 222;
			position: absolute;
			top: 45%;
			left: 50%;
			width: 80px;
			height: 80px;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd);
			animation: animate 1.2s linear infinite;
		}

		@keyframes animate {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.loader:after {
			content: '';
			position: absolute;
			top: 10px;
			left: 10px;
			right: 10px;
			bottom: 10px;
			background: #f1f1f1;
			border: solid white 10px;
			border-radius: 50%;
		}

		#bottom {
			height: 60upx;
			border-bottom: 800upx;
		}
	}
</style>